<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery.js"></script>
    <link href="/plugins/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
    <link href="/img/ctbulogo.jpg" rel="icon" ,type="image/x-icon">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }

        .container {
            display: flex;
            flex-direction: row;
            height: 100%;
            width: 100%;
        }

        .left {
            flex: 0.5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 20px;
            background-color: #11b5fc;
        }

        .right {
            flex: 4;
            display: flex;
            flex-direction: column;
            background-color: #fff;
        }

        .right-top {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: #e1e0e0;
            border: 5px solid #d5d4d4;
            border-radius: 5px;
        }

        .right-bottom {
            flex: 4;
        }

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f3f1f1;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }

        #b3 {
            border: none;
            cursor: pointer;
            font-family: 微软雅黑;
            font-weight: 700;
            height: 50px;
            width: 80px;
        }

        #b2,#b {
            border: none;
            cursor: pointer;
            font-family: 微软雅黑;
            font-weight: 700;
            height: 40px;
            width: 80px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <div>
            <img alt="Teacher" src="/img/ts0.png" id="imgid">
        </div>
        <div>
            <p style="font-size:20px;font-family:华文楷体;font-weight: 700" id="stuname">学生</p>
        </div>
        <div>
            <label for="options" style="font-size:20px;font-family:华文楷体;font-weight: 700">信息选择</label>
            <select class="form-control" id="option" name="option">
                <option>个人信息</option>
                <option>个人成绩</option>
            </select>
        </div>
    </div>
    <div class="right">
        <div class="right-top">
            <button class="btn btn-primary"  data-toggle="modal" onclick="Apassword();" id="b">修改密码</button>
            <button class="btn btn-primary" id="b3" onclick="logout();">退出登录</button>
        </div>
        <div class="right-bottom">
            <div class="container-fluid">
                <form class="form-inline">
                    <label for="options">查询方式</label>
                    <select class="form-control" id="options" name="options">
                        <option>课程名称</option>
                    </select>
                    <div class="form-group">
                        <input ,name="search" class="form-control" id="search" placeholder="请输入需要查询的关键字"
                               type="text">
                        <button class="btn btn-default btn-primary" onclick="reads();" type="button">查询</button>
                    </div>

                </form>
                <table class="table table-bordered" id="Table">
                </table>
            </div>
            <div class="modal fade" id="aModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">修改密码</h4>
                        </div>
                        <form id="formpassword">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="oldpassword">旧密码</label>
                                    <input class="form-control" id="oldpassword"
                                           name="oldpassword" placeholder="请输入旧密码" type="password" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <label for="fpassword">新密码</label>
                                    <input class="form-control" id="fpassword" name="fpassword" placeholder="请输入新密码"
                                           type="password" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <label for="spassword">新密码</label>
                                    <input class="form-control" id="spassword" name="spassword"
                                           placeholder="请再次输入新密码" type="password" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" id="passwords" name="passwords" type="hidden">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" onclick="savepassword();" type="button">提交保存</button>
                            </div>
                        </form>
                        <!--表单结束-->
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
        </div>
    </div>
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/bootstraptable/jqueryvalidate/jquery.validate.min.js"></script>
<script src="/plugins/bootstraptable/jqueryvalidate/localization/messages_zh.min.js"></script>
<script type="text/javascript">
    function logout() {
        $.ajax({
            url: "/webapi/student/logout"
        }).done(function (rs) {
            if (confirm("正在进行退出登录操作，确定吗？")) {
                if (rs >= 0) {
                    //成功
                    window.location.href = "/login/logins";
                } else {
                    alert("退出登录失败！");
                }
            }

        })
    }
    function Apassword(){
        $("#oldpassword").val("");
        $("#fpassword").val("");
        $("#spassword").val("");
        $("#passwords").val("");
        $("#aModal").modal("show");
        $.ajax({
            url: "/webapi/student/get"
        }).done(function (rs) {
            $("#passwords").val(rs);
        })
    }
    function savepassword(){
        var oldpassword=$("#oldpassword").val();
        var fpassword=$("#fpassword").val();
        var spassword=$("#spassword").val();
        var password=$("#passwords").val();
        if (oldpassword!=password){
            alert("旧密码错误!");
            return;
        }else if (fpassword!=spassword){
            alert("新密码不一致!");
            return;
        }else if (fpassword==oldpassword){
            alert("新密码与旧密码相同!");
        }else{
            $.ajax({
                url: "/webapi/student/save/"+fpassword,
                method: "put",
            }).done(function () {
                alert("修改成功！");
                $("#aModal").modal("hide");
            })
        }
    }
    function reads() {
        $('#Table').bootstrapTable("destroy");
        loadTable();
    }
    //新增
    $("#option").click(function () {
        $('#Table').bootstrapTable("destroy");
        loadTable();
    })
    function loadTable() {
        var position = $("#option").val();
        if (position == "个人信息") {
            $('#Table').bootstrapTable({
                url: '/webapi/student/getmy',
                sidePagination: "server",
                columns: [{
                    field: 'sno',
                    title: '学号'
                }, {
                    field: 'sname',
                    title: '姓名'
                }, {
                    field: 'sex',
                    title: '性别',
                    formatter: function (data, row, meta) {
                        if (row.sex == "0") {
                            var operators = '保密';
                        } else if (row.sex == "1") {
                            var operators = '男';
                        } else {
                            var operators = '女';
                        }
                        return operators;
                    }
                }, {
                    field: 'age',
                    title: '年龄'
                }, {
                    field: 'classs',
                    title: '班级'
                }, {
                    field: 'college',
                    title: '学院'
                }]
            })
        } else {
            $('#Table').bootstrapTable({
                url: '/webapi/score/getbypagestudent',
                striped: true,
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                sidePagination: "server",
                queryParams: function (parans) {
                    var paraobj = {
                        size: parans.limit,
                        page: parans.offset / parans.limit,
                        sort: "sid",
                        direct: "asc",
                        name: $("#search").val(),
                        farm: $("#options").val(),
                    };
                    return paraobj;
                },
                columns: [{
                    field: 'sno',
                    title: '学号'
                }, {
                    field: 'sname',
                    title: '姓名',
                }, {
                    field: 'cid',
                    title: '课程编号'
                }, {
                    field: 'cname',
                    title: '课程名称'
                }, {
                    field: 'score',
                    title: '成绩'
                }]
            })
        }
    }
    $(function () {
        $.ajax({
            url: "/webapi/student/getinfo"
        }).done(function (rs) {
            stuname.innerText=rs.sname;
            var obj = document.getElementById("imgid");
            if(rs.sex==1){
                obj.src = "/img/sm.png";
            }else if(rs.sex==2) {
                obj.src = "/img/sw.png";
            }
            else
            {
                obj.src = "/img/ts0.png";
            }

        })
        loadTable();
    })
</script>
</body>
</html>